<template>
  <div>
    <HomeTop></HomeTop>
    <HomeRight></HomeRight>
    <MyCenterPlugin></MyCenterPlugin>
    <ShoppingCartSearch></ShoppingCartSearch>
    <div class="favoriteShop-logo">
      <img src="https://img.alicdn.com/imgextra/i2/O1CN01bw6IxW1J9dTQPa01x_!!6000000000986-2-tps-148-56.png"></img>
      <h2>我的淘宝</h2>
    </div>
    <div class="favoriteShop-part1">
      <input v-show="FSall" type="text" placeholder="搜索店铺" class="favoriteShop-part1-input"></input>
      <span v-show="FSall"><i class="iconfont icon-sousuo"></i></span>
      <img class="favoriteShop-part1-img1"
        src="https://img.alicdn.com/imgextra/i2/O1CN01FLJYoK1ZDKY82FTzQ_!!6000000003160-2-tps-56-56.png"
        @click="changejijian(false)"></img>
      <img class="favoriteShop-part1-img2"
        src="https://img.alicdn.com/imgextra/i4/O1CN01X13gNi1wcjgIZJNv0_!!6000000006329-2-tps-56-56.png"
        @click="changejijian(true)"></img>
    </div>
    <div class="favoriteShop-part2">
      <span id="all" class="favoriteShop-part2-all" @click="selectOpt($event)">全部</span>
      <span id="always" class="favoriteShop-part2-always" @click="selectOpt($event)">常逛</span>
      <span id="buy" class="favoriteShop-part2-buy" @click="selectOpt($event)">买过</span>
    </div>
    <div class="favoriteShop-under1" v-show="FSall">
      <div>
        <span id="span1" class="favoriteShop-under1-span1" @click="selectspan($event)">最近关注</span>
        <span id="span2" class="favoriteShop-under1-span2" @click="selectspan($event)">特别关注</span>
        <span id="span3" class="favoriteShop-under1-span3" @click="selectspan($event)">有上新</span>
        <span id="span4" class="favoriteShop-under1-span4" @click="FSshowsxkmethod($event)" >{{ shaixvankuangtext }}<i
            class="iconfont icon-xiala"  :class="{changed:sxkclick}"></i></span>
      </div>
      <div class="favoriteShop-shaixvankuang" v-show="FSshowshaixvankuang">
        <ul @click="sxktext($event)">
          <li>女装</li>
          <li>男装</li>
          <li>鞋靴</li>
          <li>箱包</li>
          <li>内衣</li>
          <li>食品</li>
        </ul>
      </div>
    </div>
  
    <div class="favoriteShop-under1-notempty" v-show="FSall">
<!-- 最近关注-->
      <div id="favoriteShop-list" class="favoriteShop-list" v-for="value in 2" v-show="guanzhu&&cspan==1">
        <div class="favoriteShop-list-top">
          <img src="https://img.alicdn.com/imgextra/i1/O1CN01pz5irY1bhDKceJor2_!!6000000003496-2-tps-144-144.png"></img>
          <span class="favoriteShop-list-top-name">瑾贝生鲜企业店</span>
          <span class="favoriteShop-list-top-time">最近买过2次</span>
          <button class="favoriteShop-list-top-button1" v-show="guanzhu"><router-link to="/EnterShop" style="color:black;text-decoration: none;">进店</router-link></button>
          <button class="favoriteShop-list-top-button2" @click="FSguanzhuguanli($event)" v-show="guanzhu">关注管理<i class="iconfont icon-xiala" :class="{changed:gzclick}"></i></button>
          <button class="favoriteShop-list-top-button3" v-show="!guanzhu" @click="guanzhu=true">关注</button>
          <div class="favoriteShop-gzmanage"  v-show="FSshowguanzhuguanli">
            <ul @click="changeguanzhu($event)">
              <li id="Sgz" v-show="!Sguanzhu">特别关注</li>
              <li id="NSgz" v-show="Sguanzhu">取消特别关注</li>
              <li id="gz" v-show="!guanzhu">关注</li>
              <li id="Ngz" v-show="guanzhu">取消关注</li>
            </ul>
          </div>
        </div>
        <div class="favoriteShop-item-row" v-show="!jijian">
          <div class="favoriteShop-item" v-for="value in 4">
            <img
              src="https://img.alicdn.com/bao/uploaded/i1/2211037445884/O1CN01nFL3zG1tKvW4UGkqg_!!2211037445884.jpg"></img>
            <span class="favoriteShop-item-name">G瑾贝十三天金凤活珠子五香/香辣10-40枚</span>
            <span class="favoriteShop-item-price">￥15.9</span>
            <span class="favoriteShop-item-sale">10万+人付款</span>
          </div>
        </div>
      </div>

      <div class="favoriteShop-bottom" v-show="guanzhu&&cspan==1">
        <hr class="favoriteShop-bottom-hr1">
        <span>已经到底了,共3家店铺</span>
        <hr class="favoriteShop-bottom-hr2">
      </div>
        <div class="favoriteShop-under1-empty" v-show="!guanzhu&&cspan==1">
      <img src="https://img.alicdn.com/imgextra/i4/O1CN01CX0q7C1of0isf3iXo_!!6000000005251-2-tps-280-280.png"></img>
    </div>
    <!-- 特别关注-->
      <div id="favoriteShop-list" class="favoriteShop-list" v-for="value in 2" v-show="Sguanzhu &&cspan==2">
        <div class="favoriteShop-list-top">
          <img src="https://img.alicdn.com/imgextra/i1/O1CN01pz5irY1bhDKceJor2_!!6000000003496-2-tps-144-144.png"></img>
          <span class="favoriteShop-list-top-name">瑾贝生鲜企业店</span>
          <span class="favoriteShop-list-top-time">最近买过2次</span>
            <button class="favoriteShop-list-top-button1" v-show="guanzhu">进店</button>
          <button class="favoriteShop-list-top-button2" @click="FSguanzhuguanli($event)" v-show="guanzhu">关注管理<i class="iconfont icon-xiala" :class="{changed:gzclick}"></i></button>
          <button class="favoriteShop-list-top-button3" v-show="!guanzhu" @click="guanzhu=true">关注</button>
          <div class="favoriteShop-gzmanage"  v-show="FSshowguanzhuguanli">
            <ul @click="changeguanzhu($event)">
              <li id="Sgz" v-show="!Sguanzhu">特别关注</li>
              <li id="NSgz" v-show="Sguanzhu">取消特别关注</li>
              <li id="gz" v-show="!guanzhu">关注</li>
              <li id="Ngz" v-show="guanzhu">取消关注</li>
            </ul>
          </div>
        </div>
        <div class="favoriteShop-item-row" v-show="!jijian">
          <div class="favoriteShop-item" v-for="value in 4">
            <img
              src="https://img.alicdn.com/bao/uploaded/i1/2211037445884/O1CN01nFL3zG1tKvW4UGkqg_!!2211037445884.jpg"></img>
            <span class="favoriteShop-item-name">G瑾贝十三天金凤活珠子五香/香辣10-40枚</span>
            <span class="favoriteShop-item-price">￥15.9</span>
            <span class="favoriteShop-item-sale">10万+人付款</span>
          </div>
        </div>
      </div>
      

      <div class="favoriteShop-bottom" v-show="Sguanzhu &&cspan==2">
        <hr class="favoriteShop-bottom-hr1">
        <span>已经到底了,共3家店铺</span>
        <hr class="favoriteShop-bottom-hr2">
      </div>
        <div class="favoriteShop-under1-empty" v-show="!Sguanzhu&&cspan==2">
      <img src="https://img.alicdn.com/imgextra/i4/O1CN01CX0q7C1of0isf3iXo_!!6000000005251-2-tps-280-280.png"></img>
    </div>
    </div>
   
    <div class="favoriteShop-under2" v-show="FSalways">
      <div class="favoriteShop-list" v-for="value in 1">
        <div class="favoriteShop-list-top">
          <img src="https://img.alicdn.com/imgextra/i1/O1CN01pz5irY1bhDKceJor2_!!6000000003496-2-tps-144-144.png"></img>
          <span class="favoriteShop-list-top-name">瑾贝生鲜企业店</span>
          <span class="favoriteShop-list-top-time">最近逛过2次</span>

           <button class="favoriteShop-list-top-button1" v-show="guanzhu">进店</button>
          <button class="favoriteShop-list-top-button2" @click="FSguanzhuguanli($event)" v-show="guanzhu">关注管理<i class="iconfont icon-xiala" :class="{changed:gzclick}"></i></button>
          <button class="favoriteShop-list-top-button3" v-show="!guanzhu" @click="guanzhu=true">关注</button>
           <div class="favoriteShop-gzmanage"  v-show="FSshowguanzhuguanli">
            <ul @click="changeguanzhu($event)">
              <li id="Sgz" v-show="!Sguanzhu">特别关注</li>
              <li id="NSgz" v-show="Sguanzhu">取消特别关注</li>
              <li id="gz" v-show="!guanzhu">关注</li>
              <li id="Ngz" v-show="guanzhu">取消关注</li>
            </ul>
          </div>
        </div>
        <div class="favoriteShop-item-row" v-show="!jijian">
          <div class="favoriteShop-item" v-for="value in 4">
            <img
              src="https://img.alicdn.com/bao/uploaded/i1/2211037445884/O1CN01nFL3zG1tKvW4UGkqg_!!2211037445884.jpg"></img>
            <span class="favoriteShop-item-name">G瑾贝十三天金凤活珠子五香/香辣10-40枚</span>
            <span class="favoriteShop-item-price">￥15.9</span>
            <span class="favoriteShop-item-sale">10万+人付款</span>
          </div>
        </div>
      </div>
      <div class="favoriteShop-bottom">
        <hr class="favoriteShop-bottom-hr1">
        <span>已经到底了,共3家店铺</span>
        <hr class="favoriteShop-bottom-hr2">
      </div>
    </div>
    <div class="favoriteShop-under3" v-show="FSbuy">
      <div class="favoriteShop-list" v-for="value in 1">
        <div class="favoriteShop-list-top">
          <img src="https://img.alicdn.com/imgextra/i1/O1CN01pz5irY1bhDKceJor2_!!6000000003496-2-tps-144-144.png"></img>
          <span class="favoriteShop-list-top-name">瑾贝生鲜企业店</span>
          <span class="favoriteShop-list-top-time">14天前买过</span>
             <button class="favoriteShop-list-top-button1" v-show="guanzhu">进店</button>
          <button class="favoriteShop-list-top-button2" @click="FSguanzhuguanli($event)" v-show="guanzhu">关注管理<i class="iconfont icon-xiala" :class="{changed:gzclick}"></i></button>
          <button class="favoriteShop-list-top-button3" v-show="!guanzhu" @click="guanzhu=true">关注</button>
           <div class="favoriteShop-gzmanage"  v-show="FSshowguanzhuguanli">
            <ul @click="changeguanzhu($event)">
              <li id="Sgz" v-show="!Sguanzhu">特别关注</li>
              <li id="NSgz" v-show="Sguanzhu">取消特别关注</li>
              <li id="gz" v-show="!guanzhu">关注</li>
              <li id="Ngz" v-show="guanzhu">取消关注</li>
            </ul>
          </div>
        </div>
        <div class="favoriteShop-item-row" v-show="!jijian">
          <div class="favoriteShop-item" v-for="value in 4">
            <img
              src="https://img.alicdn.com/bao/uploaded/i1/2211037445884/O1CN01nFL3zG1tKvW4UGkqg_!!2211037445884.jpg"></img>
            <span class="favoriteShop-item-name">G瑾贝十三天金凤活珠子五香/香辣10-40枚</span>
            <span class="favoriteShop-item-price">￥15.9</span>
            <span class="favoriteShop-item-sale">10万+人付款</span>
          </div>
        </div>
      </div>
      <div class="favoriteShop-bottom">
        <hr class="favoriteShop-bottom-hr1">
        <span>已经到底了,共3家店铺</span>
        <hr class="favoriteShop-bottom-hr2">
      </div>
    </div>
  </div>
</template>
<script>
import HomeTop from "../components/HomeTop.vue";
import HomeRight from "../components/HomeRight.vue";
import MyCenterPlugin from "@/components/MyCenterPlugin.vue";
import ShoppingCartSearch from "@/components/ShoppingCartSearch.vue";
import "../style/FavoriteShopView.css"
export default {
  name: "FavoriteShopView",
  data() {
    return {
      FSshowshaixvankuang: false,
      cspan:1,
      FSall: true,
      FSalways: false,
      FSbuy: false,
      jijian: false,
      shaixvankuangtext: "筛选",
      guanzhu: true,
      Sguanzhu: false,
      FSshowguanzhuguanli: false,
      huanzhunum:1,
      sxkclick:false,
      gzclick:false,
    };
  },
  methods: {
    selectOpt(event) {
      const current = event.target;
      if (current.id === "all") {
        document.getElementById("all").style.color = "red";
        document.getElementById("always").style.color = "black";
        document.getElementById("buy").style.color = "black";
        this.FSall = true;
        this.FSalways = false;
        this.FSbuy = false;
      }
      else if (current.id === "always") {
        document.getElementById("all").style.color = "black";
        document.getElementById("always").style.color = "red";
        document.getElementById("buy").style.color = "black";
        this.FSalways = true;
        this.FSall = false;
        this.FSbuy = false;
      }
      else if (current.id === "buy") {
        document.getElementById("all").style.color = "black";
        document.getElementById("always").style.color = "black";
        document.getElementById("buy").style.color = "red";
        this.FSbuy = true;
        this.FSall = false;
        this.FSalways = false;
      }
    },
    selectspan(event) {
      const current = event.target;
      if (current.id === "span1") {
        this.cspan = 1;
        document.getElementById("span1").style.background = "#ff5000";
        document.getElementById("span2").style.background = "rgb(229, 228, 228)";
        document.getElementById("span3").style.background = "rgb(229, 228, 228)";

      }
      else if (current.id === "span2") {
        document.getElementById("span1").style.background = "rgb(229, 228, 228)";
        document.getElementById("span2").style.background = "#ff5000";
        document.getElementById("span3").style.background = "rgb(229, 228, 228)";
        this.cspan = 2;

      }
      else if (current.id === "span3") {
        document.getElementById("span1").style.background = "rgb(229, 228, 228)";
        document.getElementById("span2").style.background = "rgb(229, 228, 228)";
        document.getElementById("span3").style.background = "#ff5000";
        this.cspan = 3;
      }

    },
    changejijian(flag) {
      this.jijian = flag;
      if (flag) {
        document.getElementById("favoriteShop-list").style.height = "auto";
      }
      else {
        document.getElementById("favoriteShop-list").style.height = "450px";
      }

    },
    FSshowsxkmethod(event) {
      const _this=this;
      const Element=event.currentTarget;
      const clickoutside = (event2)=>{
     
        if(!Element.contains(event2.target)){
              _this.FSshowshaixvankuang = false;
              _this.sxkclick = false;
              document.removeEventListener('click',clickoutside);
        }
      }
      this.FSshowshaixvankuang = !this.FSshowshaixvankuang;
      this.sxkclick=!this.sxkclick;
      if(this.FSshowshaixvankuang==true){
        document.addEventListener('click',clickoutside);
      }else{
        document.removeEventListener('click',clickoutside);
      }
      
    },
    sxktext(event){
      if(event.target.tagName==="LI")
      this.shaixvankuangtext=event.target.innerText;

     
    },
    FSguanzhuguanli(event) { 
      
      const _this=this;
      const Element=event.currentTarget;
      const clickoutside = (event2)=>{
     
        if(!Element.contains(event2.target)){
           _this.FSshowguanzhuguanli = false;
           _this.gzclick=false;
            document.removeEventListener('click',clickoutside);
        }
      }
      this.FSshowguanzhuguanli = !this.FSshowguanzhuguanli;
      this.gzclick=!this.gzclick;
      if(this.FSshowguanzhuguanli==true){
        
        document.addEventListener('click',clickoutside);
      }else{
        document.removeEventListener('click',clickoutside);
      }
     
      
    },
    changeguanzhu(event){
       if(event.target.id==="gz"){
        this.guanzhu = true;
      }
      else if(event.target.id==="Sgz"){
        this.Sguanzhu = true;
      }
      else if(event.target.id==="NSgz"){
        this.Sguanzhu = false;
      }
      else if(event.target.id==="Ngz"){
        this.guanzhu = false;
      }
    }
  }

}
</script>